<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
        .slider{
            display: flex;
            width: 800px;
            height: 600px;
            list-style-type: none;
            margin: 0 auto;
            overflow: hidden;
            padding: 0;
            position: relative;
        }
        .slider li{
            width: 100%;
            position: absolute;
            display: inline-block;
            
        }
        /* .slider li.active{
            z-index: 999;
        } */
        .slider div{
            width: 100%;
            align-self:flex-end;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
        }
        .slider div a{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: white;
            margin: 10px;
            border-radius: 50%;
        }
    </style>
    <ul class="slider">
        <li><img src="images/pic1.jpg" alt=""></li>
        <li class="active"><img src="images/pic2.jpg" alt=""></li>
        <li><img src="images/pic3.jpg" alt=""></li>
        <li><img src="images/pic4.jpg" alt=""></li>
        <li><img src="images/pic5.jpg" alt=""></li>
        <div>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </ul>
    <script>
        // 0 1 2
        // 1 2 3
        // 2 3 4
        // 3 4 0
        // 4 0 1
        var domLiArr = document.getElementsByTagName('li');
        domLiArr[1].style.left = '0px';
        domLiArr[1].style.zIndex = 999;
        domLiArr[2].style.left = '800px';
        domLiArr[2].style.zIndex = 999;
        var speed = 7;
        var timer = setInterval(function(){
            domLiArr[1].style.left =  `${ parseInt(domLiArr[1].style.left) - speed }px`;
            domLiArr[2].style.left =  `${ parseInt(domLiArr[2].style.left) - speed }px`; 
            if( parseInt(domLiArr[2].style.left) <= 0){
                clearInterval(timer);
            }          
        },10)
        



        // var domUl = document.getElementsByClassName('active')[0];
        // var domLiArr = document.getElementsByTagName('li');
        // var newDomLiArr = [];
        // var count = 0;
        // var domLiArrLen = domLiArr.length;
        // for(let i = 0; i < domLiArrLen; i ++){
        //         let arr =[];            
        //         arr.push(domLiArr[i]);
        //         arr.push(domLiArr[i+1]);
        //         arr.push(domLiArr[i+2]);
        //         if(i + 1 >= domLiArrLen){
        //             // domLiArr[i + 1] = domLiArr[i + 1 - domLiArrLen];
        //             arr[1] = domLiArr[i + 1 - domLiArrLen];
        //         }   
        //         if(i + 2 >= domLiArrLen){
        //             // domLiArr[i + 2] = domLiArr[i + 2 - domLiArrLen];
        //             arr[2] = domLiArr[i + 2 - domLiArrLen];
        //         }  
        //         newDomLiArr.push(arr);
        // }
        // function funSlider(count){
        //     let arr = newDomLiArr[count];
        //     var sliderWidth = window.getComputedStyle(domUl,null).width;//str
        //     var sliderNum = parseInt(sliderWidth);
        //     arr[0].style.left = `-${ sliderNum }px`;
        //     arr[1].style.left = `0px`;
        //     arr[2].style.left = `${ sliderNum }px`; 

        //     (function (){
        //         arr[1].style.left = `-${ sliderNum }px`;
        //         arr[2].style.left = `0px`;
        //     })();
        // }       
        // setInterval(function(){          
        //     if(count == newDomLiArr.length){
        //         count = 0;
        //         }
            
        //         funSlider(count);

        //     count++;
        // },1000);
            
        var sliderUl = document.getElementsByClassName('slider')[0];

        
    </script>
</body>
</html>